<!--受理详情-->
<template> 
  <div class="contain">
    <div class="dt-head" :class="{add:todolist.BillState == 'P02'}">
      <div class="dt-head-fix">
        <template v-if="todolist.BillState == 'P02'">
          <detail-header 
            :status="'请受理订单'"
            :id="todolist"></detail-header>
        </template>
        <template v-else>
          <detail-header :id="todolist"></detail-header>
        </template>
        <!--tab-->
        <div class="lltab mb10 ft14">
          <tab bar-active-color="#77babd" 
               defaultColor="#333333"
               active-color="#77babd"
               :line-width='2'>
            <tab-item selected 
              @on-item-click="tab=true">商品信息</tab-item>
            <tab-item 
              @on-item-click="tab=false">订单反馈</tab-item>
          </tab>
        </div>
      </div>
    </div>
    <div class="detail-tab-lft" v-if="tab">
      <div class="detail-supply">
        <i class="iconfont icon-supplier ft17"></i>
        {{todolist.SupplierName}}
      </div>
      <div class="detail-fedbck df-body-nopad" v-if="tododetail.length == 0">
        <voice-msg :id="todolist"></voice-msg>
      </div>

      <div class="detail-goods-list">
        <div class="displayflex list-goods-warp" v-for="item in tododetail">
          <div class="pic">
            <img :src="item.PictContent | filterImgUrl">
          </div>
          <div class="msg flex1">
            <p class="ft17">{{item.SupplierGoodsName}}</p>
            <p>{{item.SupplierGoodsSpec}}</p>
            <p>{{item.Producer}}</p>
            <em class="def-color">共{{item.SupplierPoQty}}{{item.SupplierUnit}}</em>
          </div>
        </div>
        <p class="detail-mark ft17" v-if="todolist.Memo"><em class="ft17">备注留言：</em><i class="gray">{{(todolist.Memo == 'null') ? '':todolist.Memo}}</i></p>
        <div class="detail-num">
          <em v-if="todolist.CountSum>0">共{{todolist.CountSum}}种商品</em>小计:<span class="red">￥{{(amount || todolist.DetailSum) | fmoney}}</span>
        </div>
      </div>
      <div class="detail-customs">
        <p>要求到货日期：{{todolist.PlanEndDate | time}}
          <!-- <span v-if="todolist.BillState!='P07' && todolist.BillState!='P10'">（{{todolist.PlanEndDate | jsDateDiff}}）</span> -->
        </p>
        <p>下单时间：{{todolist.BillDate | timeshort}}</p>
      </div>
    </div>
    <template v-if="!tab">
      <feed-back :guid="todolist.Guid" :billno='todolist.BillNo'></feed-back>
    </template>
  </div>
</template>

<script>
import detailHeader from '@/components/core/header/detail_header.vue';
import feedBack from '@/components/share/billfb/billfb.vue';
import voiceMsg from '@/components/share/voiceMsg/voicemsg.vue';
export default {
  name:'acceptDetail',
  components: {
    detailHeader,
    feedBack,
    voiceMsg
  },
  data() {
    return {
      tab:true,
      tododetail:[],
      todolist:[],
      popupVisible:false,
    }
  },
  computed:{
    amount(){
      var total=0;
      for(var i = 0;i<this.tododetail.length;i++){
        total = total+this.tododetail[i].Amount;
      };
      return total;
    },
    guid(){
      return this.$route.query.id;
    },
  },
  created(){
    this.getDate();
   
  },
  mounted() {
    this.$nextTick(function() {

    })
  },
  methods: {
    wxErrAlert: function(type){
      var str=""
      switch (type) {
        case "1":
            str = "授权失败，请刷新";
            break;
        case "2":
            str = "授权信息过期，请刷新";
            break;
        }
      self.MessageBox.alert(str);
    },
    //获取详情
    getDate(){
      //通过微信授权登陆获取用户信息
      if(!localStorage.userinfo){ //没有登录过
        var self = this;
        var userinfo = null;
        var query = {};
        if(!self.$route.query.code){ //没有授权过
          var url = encodeURIComponent(window.location.href);
          self.Ajax.post('getIndexouifo', query).then(function(resp){
            if(resp.IsSuccess){
              window.location.href = resp.ErrorMessage;
            } else {
              self.wxErrAlert(1);
            }
          });
        } else {
          var wxcode = self.$route.query.code; //获取CODE
          if(wxcode != null && wxcode != ''){
            var queryForTkt = {
              exchangeCode:wxcode
            };
            self.Ajax.post('getIndexouifo', queryForTkt).then(function(Tkt){ //去服务器换取code票据URL
              if(Tkt.IsSuccess){
                self.Ajax.post(Tkt.ErrorMessage,query).then(function(aoResp){ //去微信用URL换取accesstoken和openid
                  if(aoResp){
                    var queryForUserinfo = {
                      accessToken:aoResp.access_token,  //拿到的access_token
                      openid:aoResp.openid, //拿到的openid
                    };
                    self.Ajax.post('GetoauthUserInfo',queryForUserinfo).then(function(userio){ //用accessToken和openid去服务器换取获得用户信息的URL
                      if(userio.IsSuccess){
                        self.Ajax.post(userio.ErrorMessage,query).then(function(uoResp){ //去微信用URL换取Userinfo
                          if(uoResp){
                            var uifo = {
                              StaffID:uoResp.openid, //openid
                              Name:uoResp.nickname, //用户昵称
                            }
                            localStorage.userinfo = JSON.stringify(uifo); //将USERINFO放入localStorage
                          } else {
                            self.wxErrAlert(1);
                          }
                        });
                      } else {
                        self.wxErrAlert(1);
                      }
                    });
                  } else {
                    self.wxErrAlert(1);
                  }
                });
              } else {
                self.wxErrAlert(1);
              }
            });
          } else {
            self.wxErrAlert(2);
          }
        }
      }
      //获取用户信息

      var self = this;
      var query = {
        Guid: this.guid,
      };
      this.Ajax.post('getOrderMedPoDetailGuid', query).then(function(resp) {
        self.tododetail = resp.Datas;
      });
      this.Ajax.post('getOrderMedPoGuid', query).then(function(resp) {
        self.todolist = resp.Data;
      });
    },
    Share() {
      this.popupVisible = true;
      var self = this;
      self.jWeixin.showOptionMenu();
      self.jWeixin.onMenuShareAppMessage({
          title: '订单详情', // 分享标题
          desc: "",
          link: "订单详情", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl:"", // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {
             alert('分享成功');
            //分享成功
          },
          cancel: function() {
             alert('分享失败');
            //分享失败
          }
      });
    },
    onMenuShareAppMessage() {
      var self = this;
      var url = location.href;
      url = url.substr(0, url.indexOf(location.hash)) + 'images/icon/share1.png';
      self.jWeixin.onMenuShareAppMessage({
          title: '订单详情', // 分享标题
          desc: "",
          link: "订单详情", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl:url, // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {
             alert('分享成功');
            //分享成功
          },
          cancel: function() {
             alert('分享失败');
            //分享失败
          }
      });
    }
  }
}
</script>